//封装
function byId(id){
	return typeof(id) === "string" ?document.getElementById(id):id;
}

// console.log(byId("main"));

var index = 0,
	timer = null
	pics=byId("banner").getElementsByTagName('div'),
	dots=byId("dots").getElementsByTagName('span'),
	prev=byId("prev"),
	next=byId("next"),
	len = pics.length;


function slideImg(){
	var main = byId("main");
	//滑过清除定时器，离开继续
	main.onmouseover = function(){
		if(timer) clearInterval(timer);
	}
	main.onmouseout = function(){
		timer = setInterval(function(){
			index++; 
			if(index >= len){
				index = 0
			}
			//切换图片
			changeImg();	
		},3000);
	}
	//自动触发
	main.onmouseout();

	//点击圆点切换图像
	
	for(var d=0;d<len;d++){
		//给所有span添加一个id属性，值为d，作为span的索引
		dots[d].id = d;

		dots[d].onclick = function(){
			//改变index为当前span的索引
			index = this.id;

			//调用changeImg
			changeImg();
		}
	}

	//下一张
	next.onclick = function(){
		index++;
		if(index >= len) index=0;
		changeImg();
	}

	//上一张
	prev.onclick = function(){
		index--;
		if(index < 0) index=len-1;
		// console.log(index);
		changeImg();
	}
}
	

//切换图片
function changeImg(){
	//遍历banner下的所有div，将其隐藏
	for(var i=0;i<len;i++){
		pics[i].style.display = 'none';
		dots[i].className = "";
	}
	//根据index索引找到当前的div，将其显示出来
	pics[index].style.display = 'block';
	dots[index].className = "active";
}

slideImg();







